<template>
  <div class="company-list-page">
    <!-- 顶部导航栏 -->
    <!-- <div class="page-header">
      <div class="header-left" @click="$router.go(-1)">
        <van-icon name="arrow-left" size="18" color="#333"/>
      </div>
      <div class="header-title">监测现场处理</div>
      <div class="header-right"></div>
    </div> -->
    <van-nav-bar title="监测现场处理" left-text="返回" left-arrow fixed>
      <template #left>
        <van-icon
          name="arrow-left"
          size="18"
          color="#333"
          @click="$router.go(-1)"
        />
      </template>
      <template #right></template>
    </van-nav-bar>
    <div class="main">
      <van-form input-align="right" style="border-radius: 4px">
        <van-field label="点位号" v-model="form.id"></van-field>
        <van-field
          readonly
          clickable
          name="picker"
          :value="form.projectName"
          label="项目名称"
          placeholder="请选择项目名称"
          @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            value-key="projectName"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
        <van-field name="radio" label="是否是白蚁">
          <template #input>
            <van-radio-group v-model="form.termiteIs" direction="horizontal">
              <van-radio name="是">是</van-radio>
              <van-radio name="否">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </van-form>
    </div>
    <div class="voucher">凭证</div>
    <div class="uploadBox">
      <!-- <van-field name="uploader" label="上传凭证"> </van-field> -->
      <div class="uploadBox_tit">
        <div class="color">上传现场照片</div>
        <div>
          <van-uploader
            v-model="uploader"
            :after-read="afterRead"
            :max-count="1"
          />
        </div>
      </div>
      <div class="uploadBox_tit">
        <div class="color">上传处理照片</div>
        <div>
          <van-uploader
            v-model="disposeList"
            :after-read="afterRead2"
            :max-count="1"
          />
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="btn">
        <van-button type="info" plain round class="btn100">返回</van-button>
      </div>
      <div class="btn">
        <van-button type="info" round class="btn100" @click="submitForm(1)"
          >保存</van-button
        >
      </div>
      <div class="btn">
        <van-button type="info" round class="btn100" @click="submitForm(2)"
          >提交</van-button
        >
      </div>
    </div>
    <!-- <van-overlay :show="show" @click="show = false">
      <div class="wrapper">
        <van-loading color="#1989fa">{{title}}</van-loading>
      </div>
    </van-overlay> -->
  </div>
</template>

<script>
import { termite, uploadApi } from "@/api/index";
import { Toast } from "vant";
export default {
  name: "handleItem",
  data() {
    return {
      form: {
        pointId: "",
        id: "",
        projectName: "", // 项目名称，感觉是下拉
        termiteIs: "",
        photoTermite: "", // 凭证  现场照片
        photoControl: "", // 凭证  处理照片
        logId: "",
      },
      uploader: [],
      disposeList: [],
      showPicker: false,
      columns: [],
      show: false,
      title: "上传中...",
    };
  },
  created() {
    console.log(this.$route.params);
    const params = this.$route.params;
    this.form.pointId = params.pointId;
    this.form.termiteIs = params.termiteIs;
    this.form.id = params.id;
    this.form.projectName = params.projectName;
    this.form.photoControl = params.photoControl;
    this.form.photoTermite = params.photoTermite;
    if (params.photoTermite) {
      this.uploader = [{ url: params.photoTermite }];
    }
    if (params.photoControl) {
      this.disposeList = [{ url: params.photoControl }];
    }

    this.form.logId = params.logId;

    this.init();
  },
  methods: {
    init() {
      termite.queryMonitorPointMbProjectName().then((res) => {
        if (res.errorCode === "000000") {
          this.columns = res.data;
        }
      });
    },
    onConfirm(value) {
      this.form.projectName = value.projectName;
      this.showPicker = false;
    },
    afterRead(file) {
      this.uploader[0].status = "uploading";

      uploadApi
        .uploadImage(file.file)
        .then((res) => {
          console.log(res, "图片山川解");
          if (res.errorCode === "000000") {
            this.form.photoTermite = res.data;
          }
        })
        .finally(() => {
          this.uploader[0].status = "";
        });
    },
    afterRead2(file) {
      this.disposeList[0].status = "uploading";

      uploadApi
        .uploadImage(file.file)
        .then((res) => {
          console.log(res, "图片山川解");
          if (res.errorCode === "000000") {
            this.form.photoControl = res.data;
          }
        })
        .finally(() => {
          this.disposeList[0].status = "";
        });
    },
    submitForm(val) {
      console.log(this.form, " jjjjjjjj");
      const data = {
        ...this.form,
        handleStatus: val,
      };
      if (val == 1) {
        // 保存
        this.title = "保存中...";
      } else {
        // 提交
        this.title = "提交中...";
      }
      if (val == 2 && !this.form.photoControl) {
        Toast.fail("处理照片不能为空！");
      } else {
        this.show = true;
        termite
          .handleMonitorPointMb(data)
          .then((res) => {
            if (res.errorCode === "000000") {
              console.log(res, "提交");
              this.$router.replace({
                path: "/",
              });
            }
          })
          .finally(() => {
            this.show = false;
          });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.company-list-page {
  // background-color: #fff;
  height: 100vh;
  overflow-y: auto;
}
.page-header {
  display: flex;
  align-items: center;
  height: 44px;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0 16px;

  .header-left {
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -16px;
    cursor: pointer;
  }

  .header-title {
    flex: 1;
    text-align: center;
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 500;
    font-size: 17px;
    color: #333;
  }

  .header-right {
    width: 44px;
  }
}
.main {
  padding: 60px 15px 0;
}
.voucher {
  font-family:
    PingFangSC,
    PingFang SC;
  font-weight: 500;
  font-size: 15px;
  color: #333333;
  padding: 20px 15px 7px;
}
.voucher::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 15px;
  background: #1890ff;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: middle;
  vertical-align: middle;
}

.uploadBox {
  padding: 0 15px;
  .uploadBox_tit {
    background-color: #fff;
    padding: 0 17px;
    .color {
      color: #646566;
      font-size: 14px;
      padding-top: 12px;
      margin-bottom: 13px;
    }
  }
}
.bottom {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  background: #fff;
  display: flex;
  .btn {
    flex: 1;
    padding: 10px 10px 15px 15px;
  }
  .btn100 {
    width: 100%;
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>
